<template>
    <div>
   <el-table
    :data="goodsData"
    style="width: 100%"
    max-height="1000" align="center">
    <el-table-column
     fixed
      prop="id"
      label="商品id"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="bookName"
      label="书名"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
     prop="coverImg"
      label="书本图片"
      width="120"
      align="center"
      :show-overflow-tooltip="true">
     <template slot-scope="scope">
        <img  :src="scope.row.coverImg">
     </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="书本标题"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="isbn"
      label="书号"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="press"
      label="出版社"
      width="120"
      align="center">
    </el-table-column>
<el-table-column
      prop="impression"
      label="印次"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="publishTime"
      label="出版时间"
      width="120"
      align="center">
    </el-table-column>
     <el-table-column
      prop="initTime"
      label="上架时间"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="shopName"
      label="店铺名称"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="catagName"
      label="类别"
      width="120"
      align="center">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, scope.row)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>
<script>
import { getAllBooks, delBook } from '@/api/book'
export default {
  created () {
    this.getAllBook()
  },
  methods: {

    getAllBook () {
      getAllBooks().then(res => {
        this.goodsData = res.data.data
        console.log(this.goodsData)
        this.goodsData.forEach((item, index) => {
          item.coverImg = 'http://localhost:4096/img/' + item.coverImg
        })
      })
    },
    deleteRow (index, row) {
      delBook(row.id).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
          this.getAllBook()
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
        console.log(res)

        this.getAllCategories()
        this.getAllSecond()
      })
    }
  },
  data () {
    return {
      goodsData: []

    }
  }
}
</script>
<style scoped>
img{
   height: 50px;
   width: 50px;
}
</style>
